<template>
  <div class="components-manager">
    <div class="page-header">
      <h1>编辑器组件管理</h1>
      <div class="header-actions">
        <el-button type="primary" @click="refreshComponents">刷新组件列表</el-button>
        <el-button @click="router.push('/editor')">返回编辑器</el-button>
      </div>
    </div>
    
    <div class="filter-section">
      <el-input 
        v-model="searchQuery" 
        placeholder="搜索组件..." 
        prefix-icon="el-icon-search"
        clearable
        class="search-input"
      />
      <el-select v-model="categoryFilter" placeholder="组件类别" clearable>
        <el-option 
          v-for="tab in componentTabs" 
          :key="tab.id" 
          :label="tab.name" 
          :value="tab.id"
        />
      </el-select>
    </div>
    
    <el-table :data="filteredComponentsList" border class="components-table">
      <el-table-column prop="id" label="组件ID" width="120" />
      <el-table-column label="图标" width="80">
        <template #default="scope">
          <img :src="scope.row.icon" class="component-icon" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="组件名称" width="150" />
      <el-table-column prop="category" label="分类">
        <template #default="scope">
          <el-tag :type="getCategoryTagType(scope.row.category)">
            {{ getCategoryName(scope.row.category) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="属性数量" width="100">
        <template #default="scope">
          {{ Object.keys(scope.row.defaultProps).length }}
        </template>
      </el-table-column>
      <el-table-column label="预览" width="150">
        <template #default="scope">
          <el-button size="small" @click="previewComponent(scope.row)">预览组件</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button size="small" type="primary" @click="editComponentProps(scope.row)">
            编辑属性
          </el-button>
          <el-button size="small" type="danger" @click="disableComponent(scope.row)">
            {{ isComponentDisabled(scope.row.id) ? '启用' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 组件预览对话框 -->
    <el-dialog v-model="previewVisible" title="组件预览" width="500px">
      <div v-if="previewingComponent" class="component-preview">
        <component 
          :is="previewingComponent.component" 
          v-bind="previewingComponent.defaultProps" 
        />
      </div>
    </el-dialog>
    
    <!-- 编辑组件属性对话框 -->
    <el-dialog v-model="editPropsVisible" title="编辑组件属性" width="600px">
      <div v-if="editingComponent" class="edit-props-form">
        <el-form label-position="top">
          <el-form-item 
            v-for="(value, key) in editingComponent.defaultProps" 
            :key="key" 
            :label="getPropertyLabel(key)"
          >
            <el-input 
              v-if="!isSpecialType(key, value)" 
              v-model="editingComponent.defaultProps[key]" 
            />
            <el-color-picker 
              v-else-if="isColorType(key)" 
              v-model="editingComponent.defaultProps[key]" 
              show-alpha
            />
            <el-switch 
              v-else-if="isBooleanType(value)" 
              v-model="editingComponent.defaultProps[key]" 
            />
            <el-input-number 
              v-else-if="isNumberType(value)" 
              v-model="editingComponent.defaultProps[key]" 
            />
          </el-form-item>
        </el-form>
        <div class="dialog-footer">
          <el-button @click="editPropsVisible = false">取消</el-button>
          <el-button type="primary" @click="saveComponentProps">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { componentsLibraryConfig } from '@/components/editor';

const router = useRouter();
const searchQuery = ref('');
const categoryFilter = ref('');
const previewVisible = ref(false);
const editPropsVisible = ref(false);
const previewingComponent = ref(null);
const editingComponent = ref(null);
const disabledComponents = ref([]);

// 组件类型标签页
const componentTabs = [
  { id: 'basic', name: '基础组件' },
  { id: 'business', name: '业务组件' },
  { id: 'layout', name: '布局组件' },
  { id: 'form', name: '表单组件' },
  { id: 'media', name: '媒体组件' }
];

// 筛选组件列表
const filteredComponentsList = computed(() => {
  return componentsLibraryConfig.filter(comp => {
    const matchesSearch = searchQuery.value === '' || 
      comp.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      comp.id.toLowerCase().includes(searchQuery.value.toLowerCase());
    
    const matchesCategory = categoryFilter.value === '' || 
      comp.category === categoryFilter.value;
    
    return matchesSearch && matchesCategory;
  });
});

// 刷新组件列表
const refreshComponents = () => {
  ElMessage.success('组件列表已刷新');
};

// 预览组件
const previewComponent = (component) => {
  previewingComponent.value = component;
  previewVisible.value = true;
};

// 编辑组件属性
const editComponentProps = (component) => {
  editingComponent.value = JSON.parse(JSON.stringify(component));
  editPropsVisible.value = true;
};

// 保存组件属性
const saveComponentProps = () => {
  // 在实际应用中，这里会将修改保存到后端
  ElMessage.success('组件属性已保存');
  editPropsVisible.value = false;
};

// 禁用/启用组件
const disableComponent = (component) => {
  if (isComponentDisabled(component.id)) {
    disabledComponents.value = disabledComponents.value.filter(id => id !== component.id);
    ElMessage.success(`组件 ${component.name} 已启用`);
  } else {
    disabledComponents.value.push(component.id);
    ElMessage.success(`组件 ${component.name} 已禁用`);
  }
};

// 检查组件是否被禁用
const isComponentDisabled = (id) => {
  return disabledComponents.value.includes(id);
};

// 获取分类名称
const getCategoryName = (category) => {
  const tab = componentTabs.find(tab => tab.id === category);
  return tab ? tab.name : category;
};

// 获取分类标签类型
const getCategoryTagType = (category) => {
  const types = {
    basic: '',
    business: 'success',
    layout: 'warning',
    form: 'danger',
    media: 'info'
  };
  return types[category] || '';
};

// 获取属性标签
const getPropertyLabel = (key) => {
  const labels = {
    content: '内容',
    color: '颜色',
    fontSize: '字号',
    textAlign: '对齐',
    src: '图片地址',
    width: '宽度',
    height: '高度',
    borderRadius: '圆角',
    text: '文本',
    type: '类型',
    size: '尺寸',
    backgroundColor: '背景色',
    images: '图片列表',
    autoplay: '自动播放',
    columns: '列数',
    showPrice: '显示价格',
    showTitle: '显示标题'
  };
  
  return labels[key] || key;
};

// 判断属性类型
const isSpecialType = (key, value) => {
  return isColorType(key) || isBooleanType(value) || isNumberType(value);
};

const isColorType = (key) => {
  return key.includes('color') || key.includes('Color');
};

const isBooleanType = (value) => {
  return typeof value === 'boolean';
};

const isNumberType = (value) => {
  return typeof value === 'number';
};
</script>

<style lang="scss" scoped>
.components-manager {
  padding: 20px;
  
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h1 {
      margin: 0;
      font-size: 24px;
    }
    
    .header-actions {
      display: flex;
      gap: 10px;
    }
  }
  
  .filter-section {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    
    .search-input {
      width: 300px;
    }
  }
  
  .components-table {
    margin-bottom: 20px;
    
    .component-icon {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
  }
  
  .component-preview {
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 4px;
    background-color: #f9f9f9;
  }
  
  .edit-props-form {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px;
    
    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
      gap: 10px;
    }
  }
}
</style> 